<template>
  <el-container class="h-100" v-loading="model.loading">
    <el-header
      class="shadow-sm d-flex justify-content-center bg-white"
      style="height: 80px;"
    >
      <div class="w-100" style="line-height: 80px;">
        <h5 class="d-inline">工作汇报</h5>
        <div class="float-right">
          <!-- <el-button type="primary" size="small">查询</el-button> -->
          <el-select v-model="isRead" placeholder="请选择" @change="newSearch" size="small" v-permission="[1, 3]">
            <el-option label="未读汇报" :value="1"></el-option>
            <el-option label="已读汇报" :value="2"></el-option>
            <el-option label="发布记录" :value="3" v-permission="[3]"></el-option>
          </el-select>

          <el-button @click="reportVisible = true" class="ml-3" type="primary" size="small"  v-permission="[3, 4]">发布工作汇报</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="p-2 m-2 bg-white">
      <el-table :data="model.rows">
        <el-table-column label="序号" min-width="50" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 + model.pageSize * (model.pageIndex - 1) }}
          </template>
        </el-table-column>
        <el-table-column label="汇报类型" align="center"  show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ getType(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createdBy"
          label="汇报人"
          align="center"
        ></el-table-column>
        <el-table-column label="行政区域" align="center">
          <template slot-scope="scope">
            <span
              >{{ scope.row.cityName }}
              {{ scope.row.areaName ? scope.row.areaName : "" }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ $formatDateTime(scope.row.createdDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip content="查看详情" placement="top">
              <i
                class="el-icon-document"
                style="font-size: 1.2rem;"
                @click="checkInfo(scope.row)"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-show="model.rows.length > 0"
        class="text-right py-3 pr-5 bg-white"
        @size-change="handleSizeChange"
        @current-change="val => this.model.pageLoad(val)"
        :current-page.sync="model.pageIndex"
        :page-sizes="[20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="model.count"
        :pager-count="7"
      >
      </el-pagination>
    </el-main>
    <el-dialog
      title="工作汇报详情"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="700px">
      <form>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">汇报类型</label>
          <div class="col-sm-9 pt-2">
            <span class="col-form-label">{{ getType(row) }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">汇报人</label>
          <div class="col-sm-9 pt-2">
            <span class="col-form-label">{{ row.createdBy }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">行政区</label>
          <div class="col-sm-9 pt-2">
            <span class="col-form-label">{{ row.cityName }}
              {{ row.areaName ? row.areaName : "" }}</span>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">汇报内容</label>
          <div class="col-sm-9 pt-2">
            <span class="col-form-label">{{ row.context }}</span>
          </div>
        </div>
        <div class="form-group row" v-viewer>
          <label class="col-sm-3 col-form-label text-right">附件</label>
          <ul class="list-unstyled">
            <li v-for="(item, index) in row.files" :key="index">
              <span>{{item.fileName}}</span>
              <el-button type="text" class="ml-5" @click="downfile(item)">下载</el-button>
            </li>
          </ul>
        </div>
      </form>
    </el-dialog>

    <el-dialog title="发布工作汇报" :close-on-click-modal="false" :visible.sync="reportVisible" @closed="clearRuleForm"
      width="950px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="汇报项目" prop="item">
          <el-checkbox v-model="checkedAll" @change="changedAll">全选</el-checkbox>
          <el-checkbox v-model="ruleForm.item1" :true-label="1" :false-label="0" @change="changedItem">技术协作单位确定</el-checkbox>
          <el-checkbox v-model="ruleForm.item2" :true-label="1" :false-label="0" @change="changedItem">调查人员确定</el-checkbox>
          <el-checkbox v-model="ruleForm.item3" :true-label="1" :false-label="0" @change="changedItem">人员设备上报</el-checkbox>
          <el-checkbox v-model="ruleForm.item4" :true-label="1" :false-label="0" @change="changedItem">内业提取</el-checkbox>
          <el-checkbox v-model="ruleForm.item5" :true-label="1" :false-label="0" @change="changedItem">数据补充</el-checkbox>
        </el-form-item>
        <el-form-item label="汇报内容" prop="context">
          <el-input v-model="ruleForm.context" placeholder="内容不能超过1000字" type="textarea" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <file-upload ref="pathUpload" v-model="ruleForm.files" :multiple="true">
            <el-button slot="trigger" class="width-200">选取文件</el-button>
            <p class="text-muted d-inline">
              选择文件 支持上传的文件类型: (.jpg .png .rar .txt .zip .doc .ppt
              .xls .pdf .docx .xlsx .pptx)
            </p>
          </file-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="model.loading">发布</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>
<script>
import PagedList from "@/libs/PagedList";

export default {
  name: "workreport",
  title: "工作汇报",
  data() {
    const checkitem = (rule, value, callback) => {
      for (let i = 1; i < 6; i++) {
        if (this.ruleForm[`item${i}`]) {
          callback();
          return
        }
      }
      callback(new Error('请选择汇报项目'));
    }
    let readStatus = this.$store.getters.userType === 4 ? 3 : 1
    return {
      model: new PagedList("survey/report/getNoRead", 20),
      dialogVisible: false,
      reportVisible: false,
      row: {},
      isRead: readStatus,
      checkedAll: false,
      ruleForm: {
        item1:0,
        item2:0,
        item3:0,
        item4:0,
        item5:0,
        context: "",
        files: []
      },
      rules: {
        item: [
          {validator: checkitem, trigger: 'blur'}
        ],
        context: [
          { required: true, message: "请输入汇报内容", trigger: "blur" },
          { max: 1000, message: "公告内容不能超过1000字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.newSearch();
  },
  methods: {
    newSearch() {
      if (this.isRead === 2) {
        this.model.url = 'survey/report/getRead'
      } else if (this.isRead === 1)  {
        this.model.url = 'survey/report/getNoRead'
      } else if (this.isRead === 3) {
        this.model.url = 'survey/report/getPubReport'
      }
      this.model.search();
    },
    handleSizeChange(pageSize) {
      this.model.pageSize = pageSize;
      this.newSearch();
    },
    getType(row) {
      let str = ''
      if (row.category == 1) {
        //县级汇报的
        if (row.item1 == 1) {
          str += "技术协作单位确定,";
        }
        if (row.item2 == 1) {
          str += "调查人员确定,";
        }
        if (row.item3 == 1) {
          str += "人员设备上报,";
        }
        if (row.item4 == 1) {
          str += "内业提取,";
        }
        if (row.item5 == 1) {
          str += "数据补充,";
        }
      } else if (row.category == 2) {
        //市级汇报的
        if (row.item1 == 1) {
          str += "技术协作单位确定,";
        }
        if (row.item2 == 1) {
          str += "动员大会,";
        }
        if (row.item3 == 1) {
          str += "方案制定,";
        }
      }
      return str
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.model.loading = true;
          this.$post("survey/report/addReport", {data: JSON.stringify(this.ruleForm)})
            .then(res => {
              this.$message({
                message: "发布成功",
                type: "success"
              });
              this.isRead = 3
              this.reportVisible = false;
              this.newSearch();
            })
            .finally(() => {
              this.model.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    checkInfo(row) {
      this.row = row
      this.$nextTick(() => {
        this.dialogVisible = true
      })
      if (this.isRead === 1) {
        this.$get('survey/report/read', {id: row.id}).then(() => {
          this.newSearch()
        })
      }
    },
    changedAll (val) {
      for (let i = 1; i < 6; i++) {
        this.ruleForm[`item${i}`] = val ? 1 : 0
      }
    },
    changedItem (val) {
      for (let i = 1; i < 6; i++) {
        if (!this.ruleForm[`item${i}`]) {
          this.checkedAll = false
          return
        }
      }
      this.checkedAll = true
    },
    clearRuleForm() {
      // 清空附件
      this.$refs.pathUpload.clearFiles();
      this.checkedAll= false
      this.ruleForm = {
        item1:0,
        item2:0,
        item3:0,
        item4:0,
        item5:0,
        context: "",
        files: []
      };
      this.$refs.ruleForm.resetFields();
    },
    downfile(item) {
      this.$exportExcel(`survey/file/downloadFile?fileUrl=${item.filePath}&fileName=${item.fileName}&oauth=${this.$store.state.user.user.oauth}`)
    }
  }
};
</script>
<style lang='scss'>
</style>